<template>
  <view class="page">
    <view class="title-box">
      <view class="title">我的规划</view>
      <view class="sub-title">想不敢想的，做不敢做的，你将无所畏惧。</view>
    </view>
    
    <view class="list-wrapper">
      <view class="processing-box" v-if="hasProcessing" @click="nav2process">
        <tp-plan-req-card
          :plan-id="procPlanId"
          :target="procTarget"
          :start-date="procStartDate"
          :end-date="procEndDate"
          :take-days="procTakeDays"
          :features="procFeatures"
          :budget="procBudget"
          :custom="procCustom"
          :tags="procTags"
          :show-progress="true"
          :percent="procPercent"
          :hide-prop="true">
        </tp-plan-req-card>
      </view>
      
      <tp-art-item-list
        :plans="plans" 
        :more="false" 
        @loadMore="queryPlans" 
        @agree="handleAgree"
        @collect="handleCollect"
        more-text="更多"></tp-art-item-list>
        
      <tp-nodata-card v-if="nodata" title="您暂时还没有进行过规划" :links="nodataLinks"></tp-nodata-card>
    </view>
    
    <tp-footer></tp-footer>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        hasProcessing: false,
        procPlanId: 0,
        procTarget: "",
        procStartDate: "",
        procEndDate: "",
        procTakeDays: 0,
        procBudget: "",
        procFeatures: {},
        procCustom: "",
        procTags: [],
        procPercent: 0,
        procProcessNodes: [],
        procTimer: 0,

        plans: [],
        more: true,
        page: 1,
        size: 5,
        nodataLinks: [{
          label: "去开启一个规划",
          url: "/pages/plan/start"
        }]
      };
    },
    onLoad() {
      this.resetPage()
      this.getProcessingPlan()
      this.queryPlans()
    },
    onUnload() {
      if (this.procTimer) {
        clearInterval(this.procTimer)
      }
    },
    onReachBottom() {
      if (this.more) {
        this.queryPlans()
      }
    },
    computed: {
      nodata() {
        return !this.hasProcessing && (!this.plans || this.plans.length == 0)
      }
    },
    methods: {
      resetPage() {
        this.more = true
        this.page = 1
        this.plans.splice(0, this.plans.length)
      },
      queryPlans() {
        let url = this.$urls.getApi("myPlans")
        let page = this.page
        let size = this.size;
        this.$get(url, {
          data: { page, size }
        }).then(res => {
          let plans = res.module || []
          this.more = plans.length >= size
          if (this.more) {
            this.page = page + 1;
          }
          if (plans) {
            this.plans.push(...plans)
          }
        })
      },
      handleAgree(e) {
        const {index, planId} = e
        let url = this.$urls.getApi("agreePlan")
        this.$post(url, {
          data: {
            planId
          }
        })
        .then((res) => {
          let data = res.module
          const {active, count} = data
          let plan = this.plans[index]
          plan.agreeCnt = count
          plan.agreed = active
        })
      },
      handleCollect(e) {
        const {index, planId} = e
        let url = this.$urls.getApi("collectPlan")
        this.$post(url, {
          data: {
            planId
          }
        })
        .then((res) => {
          let data = res.module
          const {active, count} = data
          let plan = this.plans[index]
          plan.collectCnt = count
          plan.collected = active
        })
      },
      
      getProcessingPlan() {
        let url = this.$urls.getApi("planningPlan")
        this.$get(url)
        .then(res => {
          let module = res.module
          if (!module) {
            this.hasProcessing = false
            return
          }
          this.hasProcessing = true
          const { planId, target, startDate, endDate, takeDays, budget, features, custom='', tags=[]} = module
          this.procPlanId = planId
          this.procTarget = target
          this.procStartDate = startDate
          this.procEndDate = endDate
          this.procTakeDays = takeDays
          this.procBudget = budget
          this.procFeatures = features
          this.procReqCustom = custom
          let len = this.procTags.length
          this.procTags.splice(0, len, ...tags)
          
          this.procTimer = setInterval(() => {
            this.queryProcess()
            if (this.procPercent >= 100) {
              if (this.procTimer) {
                clearInterval(this.procTimer)
              }
              this.hasProcessing = false
              this.resetPage()
              this.getProcessingPlan()
            }
          }, 1000)
          
        })
      },
      queryProcess() {
        let url = this.$urls.getApi("planningProcess")
        this.$get(url, {
          data: { planId: this.procPlanId}
        })
        .then(res => {
          let module = res.module || {}
          const { percent } = module
          this.procPercent = percent || 0
        })
      },
      nav2process() {
        if (!this.procPlanId) {
          return
        }
        uni.navigateTo({
          url: "/pages/plan/process?planId=" + this.procPlanId
        })
      }
    }
  }
</script>

<style lang="scss">
  @import "@/styles/_var.scss";
  .page {
    background-color: #f2f4f5;
    background-image: url(http://gx.people.com.cn/NMediaFile/2022/1008/LOCAL1665197824996FYCC3O9YRA.jpg);
    background-size: 100% 180px;
    background-repeat: no-repeat;
    min-height: calc(100vh - 48px);
  }
  
  .title-box {
    margin-top: 20px;
    color: $white;
    .title {
      font-size: 20px;
      font-weight: $font-weight-bold;
      .sub-title {
        font-size: 14px;
      }
    }
  }
  .list-wrapper {
    margin: 20px -12px 20px -12px;
  }
  
  .processing-box {
    padding: 0 $gutter;
    margin-bottom: 20px;
  }

</style>
